import { useState } from "react";
import { Text } from "react-native";

import ModalBox from "@/components/ModalBox";
import type { Props as ModalBoxProps } from "@/components/ModalBox";

export type _ModalBoxProps = Omit<ModalBoxProps, "onClose" | "onDismiss" | "onConfirm" | "visible" | "children">;

export type Option = _ModalBoxProps & {
  /** 点击取消按钮回调 */
  onClose?: () => void | Error;
  /** 点击遮罩回调 */
  onDismiss?: () => void | Error;
  /** 点击确定按钮回调 */
  onConfirm?: () => void | Error;
  /** 内容文本 */
  text?: string;
  /** 内容渲染组件, 比 text 优先级高 */
  contentComponent?: () => React.ReactNode;
};

/** ModalBox 点击回调 */
export type ModalBoxResult = {
  /** 点击遮罩 */
  dismiss: boolean;
  /** 点击确定 */
  confirm: boolean;
  /** 点击取消 */
  close: boolean;
  /** 点击中间按钮 */
  middle: boolean;
};

/** 保存配置 */
let tempOpt: Option | null = null;

/** 保存 Promise resolve 函数 */
let promiseResolveFn: ((res: ModalBoxResult) => void) | null = null;

export default () => {
  const [state, _setState] = useState<Option & { visible: boolean }>({
    visible: false
  });

  // 通用更新状态(单个)
  const setState = (field: keyof typeof state, val: any) => {
    _setState(_state => {
      return { ..._state, [field]: val };
    });
  };

  const onConfirm = () => {
    const res = tempOpt?.onConfirm?.();
    if (!(res instanceof Error)) {
      hide();

      if (promiseResolveFn) {
        promiseResolveFn({
          close: false,
          dismiss: false,
          confirm: true,
          middle: false,
        });
      }
    }
  };

  const onClose = () => {
    const res = tempOpt?.onClose?.();
    if (!(res instanceof Error)) {
      hide();
      if (promiseResolveFn) {
        promiseResolveFn({
          close: true,
          dismiss: false,
          confirm: false,
          middle: false,
        });
      }
    }
  };

  const onDismiss = () => {
    const res = tempOpt?.onDismiss?.();
    if (!(res instanceof Error)) {
      hide();
      if (promiseResolveFn) {
        promiseResolveFn({
          close: false,
          dismiss: true,
          confirm: false,
          middle: false,
        });
      }
    }
  };

  /** 中间按钮回调 */
  const onMiddle = () => {
    const res = tempOpt?.onMiddle?.();
    if (!(res instanceof Error)) {
      hide();

      if (promiseResolveFn) {
        promiseResolveFn({
          close: false,
          dismiss: false,
          confirm: false,
          middle: true,
        });
      }
    }
  };

  const hide = () => setState("visible", false);

  const show = (opt: Option) => {
    // tempOpt = opt;
    // _setState({
    //   visible: true,
    //   ...opt
    // });
    // return hide;

    return new Promise<ModalBoxResult>(resole => {
      tempOpt = opt;
      _setState({
        visible: true,
        ...opt
      });
      promiseResolveFn = resole;
    });
  };

  // 组件
  const Comp = (
    <ModalBox {...state} onClose={onClose} onDismiss={onDismiss} onConfirm={onConfirm} onMiddle={onMiddle}>
      {state.text ? <Text>{state.text}</Text> : ""}
      {tempOpt && tempOpt.contentComponent && tempOpt.contentComponent()}
    </ModalBox>
  );

  return {
    ModalBox: Comp,
    show,
    hide
  };
};
